<template>
    <div style="overflow:hidden">
        <section class="content-header">
            <div class="title">事件工单
                <i class="fa fa-angle-right fa-1x" aria-hidden="true"></i> 修改工单</div>
        </section>
        <div class="col-md-12">
            <form class="form-horizontal">
                <div class="col-md-4">
                    <div class="box-body">
                        <div class="form-group">
                            <label for="inputEmail3" class="col-sm-4 control-label">事件名称：</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" id="inputEmail3" placeholder="请输入事件名称" v-model="form.orderName" @blur="validFn('orderName')">
                            </div>
                        </div>
                        <orderType v-model="form.orderType" />
                        <div class="form-group">
                            <label class="col-sm-4 control-label">事件等级：</label>
                            <div class="col-sm-8">
                                <select class="form-control select2" style="width: 100%;" v-model="form.orderLevel">
                                    <option value="" disabled selected style='display:none;'>请选择</option>
                                    <option v-for="lst in orderLevelList" :value="lst.value" :key="lst.value">{{lst.name}}</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">事件原因：</label>
                            <div class="col-sm-8">
                                <select class="form-control select2" style="width: 100%;" v-model="form.orderReason">
                                    <option value="" disabled selected style='display:none;'>请选择</option>
                                    <option v-for="lst in selOrderReasonData" :value="lst.name" :key="lst.value">{{lst.name}}</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">
                                <i class="colorRed">*</i> 事件来源：</label>
                            <div class="col-sm-8">
                                <select class="form-control select2" style="width: 100%;" v-model="form.orderOrigin">
                                    <option value="" disabled selected style='display:none;'>请选择</option>
                                    <option v-for="lst in originList" :value="lst.value" :key="lst.value">{{lst.label}}</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputEmail3" class="col-sm-4 control-label">
                                <i class="colorRed">*</i> 联系人姓名：</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" id="inputEmail3" placeholder="请输入联系姓名" v-model="form.contacts">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputEmail3" class="col-sm-4 control-label">
                                <i class="colorRed">*</i> 联系电话：</label>
                            <div class="col-sm-8">
                                <input onkeyup="value=value.replace(/[^\d]/g,'')" type="text" class="form-control" id="inputEmail3" v-model="form.orderPhone" placeholder="请输入联系电话" @blur="validFn('orderPhone')">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-4 control-label">位置：</label>
                            <div class="col-sm-8">
                                <i class="fa fa-map" aria-hidden="true"></i>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputEmail3" class="col-sm-4 control-label">选择管线：</label>
                            <div class="col-sm-8">
                                <input type="email" class="form-control" id="inputEmail3" v-model="form.orderPipeid" placeholder="请选择管线" @blur="validFn('orderPipeid')">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">
                                <i class="colorRed">*</i> 责任部门：</label>
                            <div class="col-sm-8">
                                <select class="form-control select" style="width: 100%;" v-model="form.orderDept">
                                <!-- <select class="form-control select" style="width: 100%;" @change="test"> -->
                                    <option value="" disabled selected style='display:none;'>请选择</option>
                                    <option v-for="lst in deptList" :value="lst.name" :key="lst.deptId">{{lst.name}}</option>
                                </select>
                                <!-- <input type="email" class="form-control" id="inputEmail3" v-model="form.orderDept" placeholder="请选择管线"> -->

                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">选择片区：</label>
                            <div class="col-sm-8">
                                <select class="form-control select2" style="width: 100%;" v-model="form.orderArea">
                                    <option value="" disabled selected style='display:none;'>请选择</option>
                                    <option v-for="lst in areaList" :value="lst.areaName" :key="lst.value">{{lst.areaName}}</option>
                                </select>
                            </div>
                        </div>
                        
                        <!-- <orderPerson :DeptId="form.deptId" v-model="form.personId" /> -->
                        <orderLimit v-model="form.orderTimelimit" />

                    </div>
                </div>
                <div class="col-md-2 error">
                    <div class="box-body">
                        <div class="form-group">
                            <span class="error" :style="{visibility: (valid.orderName && !form.orderName) ? 'visible' : 'hidden'}">
                                <i class="fa fa-times-circle" aria-hidden="true"></i> 请输入事件名称</span>
                        </div>
                        <div class="form-group">
                            <span class="error" :style="{visibility: (valid.orderType && !form.orderType) ? 'visible' : 'hidden'}">
                                <i class="fa fa-times-circle" aria-hidden="true"></i> 请选择事件类别</span>
                        </div>
                        <div class="form-group">
                            <span class="error" :style="{visibility: (valid.orderLevel && !form.orderLevel) ? 'visible' : 'hidden'}">
                                <i class="fa fa-times-circle" aria-hidden="true"></i> 请选择事件等级</span>
                        </div>
                        <div class="form-group">
                            <span class="error" :style="{visibility: (valid.orderReason && !form.orderReason) ? 'visible' : 'hidden'}">
                                <i class="fa fa-times-circle" aria-hidden="true"></i> 请选择事件原因</span>
                        </div>
                        <div class="form-group">
                            <span class="error" :style="{visibility: (valid.orderOrigin && !form.orderOrigin) ? 'visible' : 'hidden'}">
                                <i class="fa fa-times-circle" aria-hidden="true"></i> 请选择事件来源</span>
                        </div>
                        <div class="form-group">
                            <span class="error" :style="{visibility: (valid.contacts && !form.contacts) ? 'visible' : 'hidden'}">
                                <i class="fa fa-times-circle" aria-hidden="true"></i> 请输入联系人姓名</span>
                        </div>
                        <div class="form-group">
                            <span class="error" :style="{visibility: (valid.orderPhone && !/^[1][3,4,5,7,8][0-9]{9}$/.test(this.form.orderPhone)) ? 'visible' : 'hidden'}">
                                <i class="fa fa-times-circle" aria-hidden="true"></i> 请输入联系电话</span>
                        </div>
                        <div class="form-group">
                            <span class="error" :style="{visibility: (valid.orderArea && !form.orderArea ) ? 'visible' : 'hidden'}">
                                <i class="fa fa-times-circle" aria-hidden="true"></i> 请选择事件片区</span>
                        </div>
                        <div class="form-group" style="height:34px">
                            <span class="error"></span>
                        </div>
                        <div class="form-group">
                            <span class="error" :style="{visibility: (valid.orderPipeid && !form.orderPipeid) ? 'visible' : 'hidden'}">
                                <i class="fa fa-times-circle" aria-hidden="true"></i> 请选择事件管线</span>
                        </div>
                        <div class="form-group">
                            <span class="error" :style="{visibility: (valid.orderDept && !form.orderDept) ? 'visible' : 'hidden'}">
                                <i class="fa fa-times-circle" aria-hidden="true"></i> 请选择责任部门</span>
                        </div>
                        <div class="form-group">
                            <span class="error" :style="{visibility: (valid.orderTimelimit && !form.orderTimelimit) ? 'visible' : 'hidden'}">
                                <i class="fa fa-times-circle" aria-hidden="true"></i> 请选择处理时限</span>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="box-body">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">上传照片：</label>
                            <div class="col-sm-10" :class="{hiddenIcon: fileList.length>2}">
                                <el-upload :action="uploadUrl" :file-list="fileList" list-type="picture-card" :on-success='handleSuccess' :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
                                    <i class="el-icon-plus"></i>
                                </el-upload>
                                <el-dialog :visible.sync="dialogVisible">
                                    <img width="100%" :src="dialogImageUrl" alt="">
                                </el-dialog>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">事件描述：</label>
                            <div class="col-sm-8">
                                <textarea class="form-control" rows="10" placeholder="请输入事件描述" v-model="form.orderDesc" maxlength="80"></textarea>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputEmail3" class="col-sm-2 control-label">创建人：</label>

                            <div class="col-sm-5">
                                <input type="email" class="form-control" id="inputEmail3" disabled="disabled" v-model="form.orderCreatename">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-12">
                    <div class="col-md-4"></div>
                    <div class="col-md-4" style="text-align: center">
                        <button type="button" class="btn btn-primary" style="margin-right:50px" @click="saveEditEvent">修改</button>
                        <button type="button" class="btn btn-default" data-toggle="modal" data-target="#myModal">取消</button>
                    </div>
                    <div class="col-md-4"></div>
                </div>
                <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                                <h4 class="modal-title" id="myModalLabel">提示</h4>
                            </div>
                            <div class="modal-body">
                                <i class="fa fa-question-circle" aria-hidden="true"></i>
                                <p>您编辑的内容尚未保存，确定取消申请吗？</p>
                            </div>
                            <div class="modal-footer">
                                <router-link to="list">
                                    <button type="button" class="btn btn-block btn-info" data-dismiss="modal">确定</button>
                                </router-link>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</template>

<script>

import orderArea from "@/components/common/orderArea.vue";
import orderType from "@/components/common/orderType.vue";
import orderOrigin from "@/components/common/orderOrigin.vue";
import orderDept from "@/components/common/orderDept.vue";
import orderPerson from "@/components/common/orderPerson.vue";
import orderLimit from "@/components/common/orderLimit.vue";

import { getItemName } from "@/filters/index.js";
export default {
    data() {
        return {
            form: [],
            valid: {
                orderName: false,
                orderType: false,
                orderLevel: false,
                orderOrigin: false,
                orderPhone: false,
                orderArea: false,
                orderX: false,
                orderY: false,
                orderPipeid: false,
                orderDept: false,
                personId: false,
                orderTimelimit: false,
                contacts: false
            },
            uploadUrl: `${window.apiPrefix}/admin/uploadFile`,
            //
            isActive: "true",
            dialogImageUrl: "",
            dialogVisible: false,
            fileList: [],
            deptList: [],
            areaList: [],
            orderLevelList: [],
            originList: [],
            personList: [],
            selOrderReasonData:[],
            // deptValue: "",
            deptId: '',
            // xx:''
        }
    },
    components: {
        orderArea,
        orderType,
        orderOrigin,
        orderDept,
        orderPerson,
        orderLimit
    },
    watch: {
        fileList() {
            this.form.orderPhotopath = "";
            this.fileList.forEach(item => {
                this.form.orderPhotopath += `${item.response.data},`;
            });
            this.form.orderPhotopath = this.form.orderPhotopath.substr(
                0,
                this.form.orderPhotopath.length - 1
            );
            // console.log(this.fileList);
        },
        'form.orderDept'() {
            this.deptId=getItemName(this.form.orderDept, this.deptList, 'name', 'deptId')
            // console.log(getItemName(this.form.orderDept, this.deptList, 'name', 'deptId'))
            console.log( typeof(this.form.orderDept));
            this.getSelOrderAreaId();
                this.getSelDutyPerson();

        },
        // 'deptValue'() {
        //     let str = this.deptValue.split(",");
        //     this.form.orderDept = str[0],
        //         this.deptId = str[1]
        // }
    },
    mounted() {
        this.getSelEventId(
            () => {
            }
        );
        this.getSelOrderSource();
        this.getSelOrderlevel();
        this.getSelOrderDept();
        this.getSelOrderReason()
    },
    methods: {
        test (e) {
                console.log(e)
        },
        getSelEventId(callback) {
            this.$api.ticket.list
                .selEventId({
                    orderId: this.$route.query.orderId,
                    status: 1
                })
                .then(res => {
                    if (res.success) {
                        this.form = res.data;
                        delete this.form.orderCreatedate
                        console.log(this.form)
                        if (res.data.orderPhotopath != null) {
                            let arr = this.form.orderPhotopath.split(',')
                            for (let item in arr) {
                                let url = { url:'',response:{
                                    data:''
                                } }
                                url.url = arr[item]
                                url.response.data = arr[item]
                                this.fileList.push(url)
                                // console.log(this.fileList)
                            }
                            // console.log(arr)
                        }
                        callback()
                    }
                });
        },
        getSelDutyPerson() {
            this.$api.ticket.list.selDutyPerson({
                deptId: this.deptId
            }).then(res => {
                if (res.success) {
                    this.personList = res.data
                    // console.log(res);
                }
            });
        },
        validFn(formName) {
            this.valid[formName] = true;
        },
        handleRemove(file, fileList) {
            this.fileList = fileList;
            console.log(file, fileList);
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        handleSuccess(response, file, fileList) {
            this.fileList = fileList;
        },
        selectDate() {
            $("#datepicker").datepicker({
                autoclose: true
            });
        },
        getSelOrderSource() {
            this.$api.ticket.list.selOrderSource().then(res => {
                if (res.success) {
                    // console.log(res)
                    for (let item in res.data) {
                        let arr = { label: "", value: "" };
                        arr.label = res.data[item].sourceName;
                        arr.value = res.data[item].sourceName;
                        this.originList.push(arr);
                    }
                }
            });
        },
        getSelOrderlevel() {
            this.$api.ticket.list.selOrderlevel().then(res => {
                if (res.success) {
                    // console.log(res)
                    this.orderLevelList = res.data
                }
            });
        },
        getSelOrderDept() {
            this.$api.ticket.list.selOrderDept().then(res => {
                if (res.success) {
                    this.deptList = res.data
                    console.log(res.data);
                }
            });
        },
        getSelOrderAreaId() {
            this.$api.ticket.list.selOrderAreaId({
                deptId: this.deptId
            }).then(res => {
                if (res.success) {
                    // console.log(res)
                    this.areaList = res.data
                }
            });
        },
        getSelOrderReason() {
            this.$api.ticket.list.selOrderReason().then(res => {
                if (res.success) {
                    this.selOrderReasonData = res.data
                    // console.log(res.data);
                }
            });
        },
        saveEditEvent() {
            if (this.form.orderName == "") {
                this.validFn("orderName");
            } else if (this.form.orderType == "") {
                this.valid.orderType = true;
            } else if (this.form.orderLevel == "") {
                this.valid.orderLevel = true;
            } else if (this.form.orderOrigin == "") {
                this.valid.orderOrigin = true;
            } else if (!/^[1][3,4,5,7,8][0-9]{9}$/.test(this.form.orderPhone)) {
                this.validFn("orderPhone");
            } else if (this.form.orderArea == "") {
                this.valid.orderArea = true;
            } else if (this.form.orderPipeid == "") {
                this.validFn("orderPipeid");
            } else if (this.form.orderDept == "") {
                this.valid.orderDept = true;
            } else if (this.form.orderTimelimit == "") {
                this.valid.orderTimelimit = true;
            } else {
                console.log(this.form)
                this.$api.ticket.list.editEvent(this.form).then(res => {
                    if (res.success) {
                        console.log(res);
                    }
                });
                this.$$message({
                    message: "恭喜您，修改成功！",
                    type: "success"
                });
                this.$router.push({ path: "list" });
            }
        }
    }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.content-header {
  padding-bottom: 10px !important;
  .title {
    font-weight: bolder;
  }
}
input,
select,
textarea {
  border-radius: 5px;
}
.control-label {
  padding: 0;
  line-height: 34px;
}
.content-header {
  padding-bottom: 15px;
  .title {
    font-weight: bolder;
  }
}
.modal-body {
  padding: 50px 0;
  text-align: center;
  i {
    font-size: 40px;
    margin-bottom: 20px;
    color: #3c8dbc;
  }
}
.modal-header {
  background: #3c8dbc;
  span {
    line-height: 20px;
    display: inline-block;
    width: 20px;
    height: 20px;
    background: white;
    margin-top: 10px;
    border-radius: 50%;
  }
}
.btn-block {
  width: 60px;
  background: #3c8dbc;
  float: right;
}
.fa-asterisk {
  font-size: 1px;
  color: red;
}
</style>
<style rel="stylesheet/scss" lang="scss">
.hiddenIcon {
  .el-upload--picture-card {
    display: none;
  }
}
input[type="file"] {
  display: none;
}
</style>